<template>
    <div class="article">
        <div class="post-top">
            <h1 class="article-title">Webpack Book 翻译计划开坑</h1>
            <div class="content_tech">
                <div class="tagPopup">
                    <span class="tag">前端</span>
                </div>
                <span class="post-info">15 小时前  ·  49 次阅读</span>
            </div>
        </div>
        <div class="visible-pc">
            <div class="side-widget">
                <i class="side-widget-votes-num">11</i>
                <el-button size="small" type="default" icon="fa fa-thumbs-o-up"></el-button>
                <i class="side-widget-bookmarks-btn fa fa-bookmark item"></i>
                <i class="fa fa-weibo item"></i>
                <i class="fa fa-weixin item" data-toggle="popover" data-placement="right" data-original-title="" title=""></i>
            </div>
        </div>
        <div class="article-content"></div>
        <div class="article-link">
            <el-button type="success"><a>赞</a><a>7</a></el-button>
            <el-button><a>收藏</a><a>4</a></el-button>
            <div class="admire">
                <el-button type="danger">赞赏支持</el-button>
            </div>
        </div>
        <div class="article_reward-info">
            如果觉得我的文章对你有用，请随意赞赏
        </div>

    </div>
</template>

<script>
export default {
    name: 'news-detail'
}
</script>

<style lang="scss">
.side-widget button {
    margin-bottom: 10px;
    font-size: 13px;
    border-radius: 4px;
    .fa {
        color: #5CB85C;
        transform: translate(-50%);
    }
}
.article-link {
    a + a:before {
        content: "";
        font-size: 0;
        padding: 10px 5px 1px;
        margin-left: 10px;
        border-left: 1px solid rgba(0,0,0,0.1);
    }
}
</style>

<style lang="scss" scoped>
.post-top {
    margin-bottom: 20px;
    .article-title {
        font-size: 34px;
        line-height: 48px;
        margin-bottom: 20px;
        font-weight: 500;
    }
    @media (max-width: 550px) {
        .article-title {
            font-size: 25px !important;
            line-height: 35px !important;
        }
    }
    .content_tech::before {
        content: '原';
        margin-left: 0;
        margin-right: 10px;
        padding: 0 6px;
        height: 22px;
        line-height: 22px;
        border-radius: 11px;
        color: #42b983;
        background-color: rgba(92,184,92,0.25);
        font-weight: normal;
    }
    .content_tech {
        font-size: 13px;
    }
    .tagPopup {
        display: inline-block;
        margin: 0 5px 5px 0;
        .tag {
            display: inline-block;
            height: 22px;
            line-height: 22px;
            padding: 0 6px;
            color: #42b983;
            background-color: rgba(92,184,92,0.25);
            font-weight: normal;
            text-align: center;
        }
    }
    .post-info {
        margin-left: 5px;
        color: #999;
    }
}
.article-content {
    margin-top: 60px;
    line-height: 1.8;
    font-size: 15px;
    word-wrap: break-word;
}
.side-widget {
    position: fixed;
    display: flex;
    width: 40px;
    flex-direction: column;
    margin-left: -80px;
    margin-top: -100px;
    font-size: 20px;
    z-index: 1000;
    .side-widget-votes-num {
        margin-bottom: 0;
        font-size: 13px;
        color: #999;
        text-align: center;
        font-style: normal;
    }
    .side-widget-votes-btn {
        color: #5CB85C;
        margin-bottom: 10px;
        border-radius: 4px;
    }
    .item {
        padding: 10px;
        cursor: pointer;
        text-align: center;
        color: #999;
    }
}
@media (max-width: 1280px) {
    .side-widget {
        left: 0;
        margin-left: 5px !important;
        font-size: 15px !important;
        width: 30px !important;
    }
}
.article-link {
    margin: 10px 0 30px 0;
    text-align: center;
    .admire {
        margin-top: 15px;
        .el-button--danger{
            padding: 12px 68px;
        }
    }
}
.article_reward-info {
    margin-bottom: 30px;
    text-align: center;
    color: #999;
}
</style>
